<template>
    <div>
        <div ref="jsonEditor" style="height: 460px;"></div>
    </div>
</template>

<script>
import JSONEditor from 'jsoneditor';
import 'jsoneditor/dist/jsoneditor.css';
import {ElMessage} from "element-plus";

export default {
    name: 'JsonEditor',
    props: {
        // v-model 绑定的值
        modelValue: {
            type: String,
            default: ""
        },
        options: {
            type: Object,
            default: () => ({
                mode: 'code', // 默认编辑模式
                modes: ['tree', 'code', 'form', 'view',], // 可切换模式
            }),
        },
    },
    data() {
        return {
            editorInstance: null, // JSONEditor 实例
        };
    },
    mounted() {
        this.initializeEditor();
    },
    beforeUnmount() {
        if (this.editorInstance) {
            this.editorInstance.destroy();
            this.editorInstance = null;
        }
    },
    methods: {
        initializeEditor() {
            let jsonValue = null;
            try {
                jsonValue = JSON.parse(this.modelValue)
            } catch (e) {
                ElMessage({message: "当前数据不是 JSON 格式, 无法打开 JSON 编辑器", type: 'error'});
                console.log(e.toString())
            }
            const container = this.$refs.jsonEditor;
            // 初始化 JSONEditor 实例
            this.editorInstance = new JSONEditor(container, {
                ...this.options,
                onChange: this.handleChange,
            });
            // 设置初始值
            this.editorInstance.set(jsonValue);
        },
        handleChange() {
            try {
                const updatedValue = this.editorInstance.get(); // 获取编辑后的数据
                console.log(JSON.stringify(updatedValue))
                this.$emit('update:modelValue', JSON.stringify(updatedValue));  // 通知父组件更新
            } catch (error) {
                console.error('JSON 格式错误:', error);
            }
        },
    },
};
</script>

<style>
/* 添加编辑器的默认高度和样式 */
div[ref="jsonEditor"] {
    height: 400px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

/* JSONEditor 样式覆盖 */
.jsoneditor {
    background-color: #ffffff; /* 使用 Element UI 的浅色背景 */
    color: black; /* 字体颜色与 Element UI 保持一致 */
    border: 1px solid #eaeaea; /* 边框颜色 */
    border-radius: var(--el-border-radius-base); /* 边框圆角 */
}

/*  菜单背景 */
.jsoneditor-menu {
    background-color: #ffffff; /* 菜单背景色 */
    border-bottom: 1px solid #eaeaea; /* 菜单边框 */
}

/* 菜单按钮图标文字颜色  */
.jsoneditor-menu > button, .jsoneditor-menu > .jsoneditor-modes > button {
    border: 1px solid #ffffff;
    background-color: #dad7d7;
    color: #111418;
}

.jsoneditor-frame {
    border: 1px solid #f1eeee;
}

/* 代码行号背景色 */
.ace-jsoneditor .ace_gutter {
    background: #f7f7f7;
}

/* 选择一个节点..提示背景色 */
.jsoneditor-navigation-bar, .jsoneditor-statusbar {
    background-color: #fdfdfd;
}

/* 按钮悬停颜色 */
.jsoneditor-menu button:hover {
    background-color: #b0bec5;
}


</style>